<template>
  <div class="pageWrapper">
    <common-header />
    <div class="content" v-if="permissionList.filter(ele => ele.is_permission).length">
      <div class="banner-wrap">
        <img class="banner" src="@/assets/normal/banner.png" />
      </div>
      <div class="list">
        <div class="list-item" v-if="permissionList[0].is_permission" @click="redirectTo(`/normal/report?deptId=${permissionList[0].deptId}`)">
          <div class="item-icon">
            <img src="@/assets/normal/work-icon.png" />
          </div>
          <div class="item-title">工作记实</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>

        <div class="list-item" v-if="permissionList[1].is_permission" @click="redirectTo(`/normal/appraisalPeriod`)">
          <div class="item-icon">
            <img src="@/assets/normal/cycle-icon.png" />
          </div>
          <div class="item-title">周期评议</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>

        <div class="list-item" v-if="permissionList[2].is_permission" @click="redirectTo(`/appraisalProcess`)">
          <div class="item-icon">
            <img src="@/assets/normal/evaluation-icon.png" />
          </div>
          <div class="item-title">审核评鉴</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>

        <div class="list-item" v-if="permissionList[3].is_permission" @click="redirectTo('/appraisalResults?deptId=' + permissionList[3].deptId)">
          <div class="item-icon">
            <img src="@/assets/normal/result-icon.png" />
          </div>
          <div class="item-title">考核结果</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>

        <div class="list-item" v-if="permissionList[4].is_permission" @click="redirectTo('/objectionHandle')">
          <div class="item-icon">
            <img src="@/assets/normal/objection-icon.png" />
          </div>
          <div class="item-title">异议结果处理</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>

        <div class="list-item" v-if="permissionList[5].is_permission" @click="redirectTo(`/regulation?deptId=${permissionList[5].deptId}&type=1`)">
          <div class="item-icon">
            <img src="@/assets/normal/evaluation-icon.png" />
          </div>
          <div class="item-title">考核制度</div>
          <div class="item-btn">
            <img src="@/assets/index/arrow-right.png" />
          </div>
        </div>
      </div>
    </div>
    <common-empty v-else message="还未添加任何考核单位请联系单位<br />管理员，先添加考核单位" />
  </div>
</template>

<script>
import { getHomepageList } from "@/api/common";
export default {
  name: "Index",
  components: {},
  data() {
    return {
      permissionList: [
        {
          label: "工作记实",
          deptId: 0,
          is_permission: 0
        },
        {
          label: "周期评议",
          deptId: 0,
          is_permission: 0
        },
        {
          label: "审核评鉴",
          deptId: 0,
          is_permission: 0
        },
        {
          label: "考核结果",
          deptId: 0,
          is_permission: 0
        },
        {
          label: "异议结果处理",
          deptId: 0,
          is_permission: 0
        },
        {
          label: "考核制度",
          deptId: 0,
          is_permission: 0
        }
      ]
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      getHomepageList(1).then(res => {
        res.data.forEach(ele => {
          let item = this.permissionList.filter(item => ele.name == item.label)[0];
          item.is_permission = 1;
          item.deptId = ele.deptId;
        });
        // this.permissionList = res.data.map(ele => {
        //   this.permissionList[ele.name] = ele.deptId;
        // });
      });
    },
    redirectTo(path) {
      this.$router.push({
        path: path
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 16px;
  .banner-wrap {
    .banner {
      display: block;
      width: 100%;
      margin-bottom: 20px;
    }
  }

  .list-item {
    display: flex;
    align-items: center;
    background: #fff;
    margin-bottom: 16px;
    border-radius: 8px;
    padding: 18px 20px 18px 24px;
    font-size: 14px;
    color: #333333;
    &:active {
      background: #f9f9f9;
    }
    img {
      width: 32px;
      display: block;
    }
    .item-title {
      flex: 1;
    }
    .item-icon {
      margin-right: 16px;
    }
  }
}
</style>
